<template>
	<view id="recruit">
		<view class="topSection">
			<image src="../../static/images/top4.png" class="topImg"></image>
			<view class="bannerTop">
				<uni-icons class='backBtn' @tap="backBtn" type="back" size="22" color="#fff"></uni-icons>
				招聘信息
			</view>
			<uni-easyinput class="searchInput" suffixIcon="search" 
			v-model="value.recruitPosition" placeholder="请输入关键词搜索" @iconClick="init"></uni-easyinput>	
		</view>
		<uni-card style="margin-top: 140px">
			<view class="list" v-for="(item, index) in listData" @tap="itemDetail(item)">
				<uni-row class="line1">
					<uni-col :span='12'>{{item.recruitPosition}}</uni-col>
					<uni-col :span='12' class="salary">{{item.salaryType + ' ' + (item.salary == '面议' ? '' : (item.salary + ' 元'))}}</uni-col>
				</uni-row>
				<view class="line2">{{item.enterpriseName}}</view>
				<view class="line3">
					{{item.education}}
				</view>
				<view class="line4">
					<uni-tag v-if="item.workMeal" size="mini" text="提供工作餐" type="primary" style="margin-right: 5px" />
					<uni-tag v-if="item.accommodation" size="mini" text="提供住宿" type="primary" />
				</view>
			</view>
		</uni-card>		
		<uni-pagination :total="total" @change="changePage" style="padding: 0 10px;" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: {
					page: 1,
					recruitPosition: ''
				},
				total: 0,
				current: 1,
				listData: [
					{
						recruitPosition: '自动线操作工',
						enterpriseName: '苏州百世电器有限公司',
						salary: '7K-8K/月',
						education: '高中',
						workMeal: true,
						accommodation: false,
						responsibilities: '',
						responsibilities: '',
						releaseTime: '',
						contact: ''
					},
				],
			}
		},
		created() {
			this.init()
		},
		methods: {
			backBtn() {
				uni.navigateBack()
			},
			init() {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: '/sf_enterprise_service/business/anonrecruit/queryPage',
					data: this.value,
					method: 'GET',					
					success: (res) => {		
						console.log(res, 'res??')
						if(res.data.data.list.length) {	
							this.listData = res.data.data.list
							this.total = res.data.data.totalCount
							console.log(this.listData)
							// recruitRequires
							this.listData.forEach(item => {
								item.recruitRequires = item.recruitRequires.replace(/\n/g, '<br>')
								item.responsibilities = item.responsibilities.replace(/\n/g, '<br>')
								console.log(item, 'item')
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					complete: () => {							
						uni.hideLoading();
					}
				})
			},
			changePage(e) {
				console.log(e)
				// this.current = e.current
				this.value.page = e.current
				this.init()
			},
			itemDetail(item) {
				// console.log(item, encodeURIComponent(item), 'item')
				uni.navigateTo({
					url: '/pages/recruit/recuitDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</script>

<style scoped>
	.topSection {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 5;
	}
	.topImg {
		width: 100%;
		height: 130px;
		z-index: 1;
		position: absolute;
	}
	.bannerTop {
		text-align: center;
		color: #fff;
		font-weight: bold;
		z-index: 2;
		position: relative;
		height: 50px;
		line-height: 50px;
		/* border: 1px solid  red;		 */
	}
	.backBtn {
		position: absolute;
		left: 10px;
	}
	.searchInput {
		z-index: 2;
		position: relative;
		top: 10px;
		width: 90%;
		margin: 0 auto;	
		.is-input-border {
			border-radius: 24px;
		}
		.uni-easyinput__content-input {
			padding-left: 15px !important;
		}
	}
	
    .list {
		/* height: 30vh; */
		border-bottom: 1px solid gray;
		padding: 10px 0;
		
	}
	.salary {
		color: red;
		text-align: right;
	}
	.line1,
	.line2 {
		font-weight: bold;
		color: #000;
	}
	.line3 {
		font-size: 12px;
	}
	.list:last-child {
		/* height: 30vh; */
		border-bottom: none;
	}
</style>
